<template>
  <!-- 绑定有礼 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="activityDataList" @query="getActivityList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="时间类型:" label-width="80px">
            <el-select v-model="listQuery.time_type" placeholder="请选择时间类型" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in timeTypeData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动状态:" label-width="80px">
            <el-select v-model="listQuery.status" placeholder="请选择活动状态" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in statusData" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button v-permission="'active.add'" type="primary" size="mini" icon="el-icon-plus" @click="isShowDetails = true, checkedItem = null">新增</el-button>
          <el-button v-permission="'active.edit'" size="mini" :disabled="!checkedItem || checkedItemStatus!=1" type="success" @click="editItem('',2)" icon="el-icon-success">开启</el-button>
          <el-button v-permission="'active.edit'" size="mini" :disabled="!checkedItem || checkedItemStatus!=2" type="danger" @click="editItem('',3)" icon="el-icon-remove">关闭</el-button>
          <el-button v-permission="'active.edit'" size="mini" :disabled="!checkedItem || checkedItemStatus!=3" type="primary" @click="editItem('',1)" icon="el-icon-question">预发布</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getActivityList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" align="center" width="90"/>
          <el-table-column prop="name" label="活动名称" align="center" width="200">
            <template slot-scope="scope">
              <span>{{ languageArrayMap.get(scope.row.name) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="activity_type" label="活动类型" align="center" width="120">
            <template slot-scope="scope">
              <el-tag type="warning">{{ activityType(scope.row.activity_type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="time_type" label="活动时间" align="center" width="120">
            <template slot-scope="scope">
              <el-tag :type="timeType(scope.row.time_type)">{{ timeValue(scope.row.time_type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="活动状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="statusType(scope.row.status)">{{ statusValue(scope.row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="other" label="奖励" align="center" width="350">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.propData" :key="index">
                {{ propLabel(item.itemType) }}【<span class="colorRed">{{ item.num }}</span>】
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="展示数字" align="center" width="120"/>
          <el-table-column prop="scroll_bar_status" label="滚动栏" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.scroll_bar_status==1?'success':'info'">{{ scope.row.scroll_bar_status==1?'开启':'关闭'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="scroll_bar_sort" label="滚动栏排序" align="center" width="100"/>

          <el-table-column prop="activity_bar_status" label="活动栏" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.activity_bar_status==1?'success':'info'">{{ scope.row.activity_bar_status==1?'开启':'关闭'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="activity_bar_sort" label="活动栏排序" align="center" width="100"/>

          <el-table-column prop="promotion_bar_status" label="推广栏" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.promotion_bar_status==1?'success':'info'">{{ scope.row.promotion_bar_status==1?'开启':'关闭'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="promotion_bar_sort" label="推广栏排序" align="center" width="100"/>
          <el-table-column prop="start_time" label="开始时间" align="center" width="200"/>
          <el-table-column prop="end_time" label="结束时间" align="center" width="200"/>
          <el-table-column prop="operation" label="操作" align="left" width="200" fixed="right">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="'active.edit'" content="编辑" placement="top-start">
                <el-button size="mini" type="warning" @click.stop="editItem(scope.row)" icon="el-icon-edit-outline" />
              </el-tooltip>
              <el-tooltip effect="dark" v-permission="'active.delete'" content="删除" placement="top-start">
                <el-button size="mini" :disabled="scope.row.status!=3" type="danger" @click="deleteItem(scope.row)" icon="el-icon-delete"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getActivityList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" :data="checkedItem" @onHideDetails="onHideDetails" :propDataArray="propDataArray"/>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getActivity,
  delActivity,
  editActivity
} from '@/api/activity'
import {
  ACTIVITY_TYPE
} from "@/utils/enum";
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'binding',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      ACTIVITY_TYPE,
      listQuery: {
        page: 1,
        size: 50,
        status:0,
        time_type:0,
        activity_type:11
      },
      propDataArray: this.$store.state.commonState.propDataArray,
      languageDataArray: this.$store.state.commonState.languageDataArray,
      languageArrayMap: new Map(),
      isShowDetails: false,
      checkedItem: null,
      checkedItemStatus: 0,
      listLoading: true,
      activityDataList: [],
      currentTotal: 0,
      timeTypeData:[
        {label:'全部',value:0,type:''},
        {label:'永久活动',value:1,type:'success'},
        {label:'限时活动',value:2,type:'danger'},
        {label:'循环活动',value:3,type:'primary'}
      ],
      statusData:[
        {label:'全部',value:0,type:'primary'},
        {label:'预发布',value:1,type:''},
        {label:'开启',value:2,type:'success'},
        {label:'关闭',value:3,type:'info'}
      ],
    }
  },
  created () {
    const languageArrayMap = new Map();
    this.languageDataArray.forEach(s => {
      languageArrayMap.set(s.value, s.label);
    });
    this.languageArrayMap = languageArrayMap;
  },
  activated(){
    this.propDataArray=this.$store.state.commonState.propDataArray
    this.languageDataArray=this.$store.state.commonState.languageDataArray
    this.getActivityList()
  },
  methods: {
    // 获取活动列表
    async getActivityList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.activityDataList = []
      that.checkedItem = null
      const response = await getActivity(params)
      if (response.code == 1) {
        response.data.list.forEach(item => {
          item=that.$public.activeValue(item)
        })
        that.activityDataList = response.data.list
        that.currentTotal = response.data.total
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 道具的值
    propLabel(cellValue){
      return (this.propDataArray.find((item) => item.value === cellValue)?.label || "");
    },
    // 活动类型
    activityType(cellValue){
      return (this.ACTIVITY_TYPE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 时间类型
    timeValue(cellValue){
      return (this.timeTypeData.find((item) => item.value === cellValue)?.label || "-");
    },
    // 时间类型
    timeType(cellValue){
      return (this.timeTypeData.find((item) => item.value === cellValue)?.type || "-");
    },
    // 活动状态
    statusValue(cellValue){
      return (this.statusData.find((item) => item.value === cellValue)?.label || "-");
    },
    // 活动状态
    statusType(cellValue){
      return (this.statusData.find((item) => item.value === cellValue)?.type || "-");
    },
    // 编辑/查看
    editItem (row,status) {
      let that=this,title='';
      if(row){
        that.checkedItem=row
        that.handleCurrentChange(row)
      }else{
        row=that.checkedItem
      }
      if(status){
        switch (status) {
          case 1:
            title="预测"
          break;
          case 2:
            title="开启"
          break;
          case 3:
            title="关闭"
          break;
        }
        that.$confirm(`是否${title}【${that.languageArrayMap.get(row.name)}】活动状态?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.status=status
          editActivity(row).then(function (res) {
            that.$message({
              type: 'success',
              message: res.msg
            })
            that.onHideDetails(true)
          }).catch((error) => {
            that.$message.error(error.msg)
          })
        }).catch((err) => {})
      }else{
        that.isShowDetails=true
      }
    },
    // 删除
    deleteItem (row) {
      const that = this
      that.handleCurrentChange(row)
      that.$confirm(`是否删除【${that.languageArrayMap.get(row.name)}】活动?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delActivity({
          id: row.id
        }).then(res => {
          if (res.code == 1) {
            that.$message({
              type: 'success',
              message: res.msg
            })
            that.onHideDetails(true)
          }
        })
      }).catch((err) => {})
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val
      this.checkedItemStatus=val.status
      this.activityDataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    onHideDetails (show) {
      this.isShowDetails = false
      if (show) {
        this.getActivityList(true)
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        status:0,
        time_type:0,
        activity_type:11
      }
      this.getActivityList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
.pic-url {
  width: 90px;
  display: inline-block;
  object-fit: cover;
  border-radius: 4px;
}
</style>
